Виджеты. Spacer Expanded

➡️ Скачать презентацию. Гибкие Виджеты
➡️ Ссылка на репозиторий с кодом этого урока

Гибкие виджеты

Виджеты для работы с пустым пространством SizedBox() и Spacer()

Для начала рассмотрим пример с карточками-роллами и разберем на примере возможности виджета SizedBox() и Spacer()

• В папку widgets добавим файл expanded_widget.dart
• В файле создадим виджет SizedBoxExample()
• ⭕ В файле main.dart не забудьте передать SizedBoxExample() в body 

SizedBox()

C помощью виджета SizedBox() можно добавить пустое пространство между другими виджетами (по высоте или по ширине)

Установим между карточками пустое пространство по ширине с помощью SizedBox()

Файл expanded_widget.dart

import 'package:course_2025/rolls/roll_card.dart';
import 'package:flutter/material.dart';

class SizedBoxExample extends StatelessWidget {
  const SizedBoxExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Row(
        children: [
          RollCard(),
          SizedBox(width: 16),
          RollCard(),
          SizedBox(width: 16),
          RollCard(),
        ],
      ),
    );
  }
}
                  

Spacer()

Виджет Spacer() позволяет добавить гибкое пустое пространство. Он добавляет столько места, чтобы заполнить всю возможную ширину или высоту.

Например, если убрать все SizedBox() и добавить Spacer() после первого RollCard() то, после первой карточки добавиться столько пространства, что остальные карточки ужмутся в правый край.

Row(
  children: [
    RollCard(),
    Spacer(), // Добавить максимально возможно пространство
    RollCard(),
    RollCard(),
  ],
),

                  

Если добавить теперь после второго RollCard() виджет Spacer(), то между двумя этими свободными гибкими пространствами распределится всё свободное место.

Row(
  children: [
    RollCard(),
    Spacer(), 
    RollCard(),
    Spacer(),
    RollCard(),
  ],
),

                  

В качестве параметра Spacer() принимает flex, где можно указать долю занимаемого пространства. Например, в случае ниже, второй Spacer() будет занимать в 2 раза места больше чем первый Spacer()

Row(
  children: [
    RollCard(),
    Spacer(flex: 1), 
    RollCard(),
    Spacer(flex: 2),
    RollCard(),
  ],
),

                  

Способы применения SizedBox()

Виджет SizedBox() используется для 2 вариантов

1. Когда нужно создать пустой отступ между элементами
2. Когда нужно обернуть другой виджет для изменения размеров

Рассмотрим 2 способ. Например, обернем первый RollCard() в виджет SizedBox() и укажем размеры height и width. Размеры карточки станут новыми!

class SizedBoxExample extends StatelessWidget {
  const SizedBoxExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Row(
        children: [
          SizedBox(
            width: 150,
            height: 350,
            child: RollCard(),
          ),
          RollCard(),
          RollCard(),
        ],
      ),
    );
  }
}